<!-- 这是主页面 登陆之后的页面 -->

<template>
<!--  <el-watermark :content="['医路通后台流程管理系统', '六边形团队']" :font="font">-->
  <div class="layout-container">
    <!-- 左侧菜单侧边栏 -->
    <div class="sidebar-container" :style="{width: isCollapse ? '64px' : '208px'}">
      <el-menu
        background-color="#ffffff"
        style="width:100%;height:100vh;"
        unique-opened
        router
        :collapse="isCollapse"
        :collapse-transition="false"
      >
        <!-- 左侧菜单栏的顶部条 -->
        <el-row style="padding-top: 10px;">
          <el-col :span="6" style="padding-left: 7px;">
            <img src="../../assets/images/LoginLogo.png" style="width: 35px;height: 35px;"></img>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13" class="title-transition">
            <span :style="{
              color: '#303133',
              position: 'relative',
              top: '8px',
              left: '0px',
              fontWeight: '600',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              fontSize:'14px'
            }">Medical Admin Pro</span>
          </el-col>
        </el-row>
        <!-- 动态菜单项 -->
        <template v-for="(item, index) in menuItems" :key="index">
          <el-menu-item v-if="item.children == null" :index="item.index">
            <el-icon style="font-size: 21px;"><Operation/></el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
          <el-sub-menu v-else :index="item.index">
            <template #title>
              <el-icon style="font-size: 21px;"><Operation/></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex" :index="child.index">
              {{ child.title }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
    
    <!-- 右侧内容区 -->
    <div class="main-container" :style="{width:(isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)')}">
      <!-- 顶部导航 -->
      <el-header class="elHeader">
        <div class="header-left">
          <el-icon class="fold-icon" @click="changeCollapsed" style="font-size: 22px">
            <Expand v-if="isCollapse" />
            <Fold v-else />
          </el-icon>
          <span class="page-title">{{ currentPageTitle }}</span>
        </div>
        <div class="nameBox">
          <el-icon
              class="fullscreen-btn"
              @click="fullscreen" style="font-size: 22px;cursor: pointer"
          >
            <FullScreen style="width: 20px; height: 20px; color: inherit;" />
          </el-icon>
          <el-icon 
            class="setting-btn" 
            @click="drawerVisible = true" style="font-size: 22px"
          >
            <Setting style="width: 20px; height: 20px; color: inherit;" />
          </el-icon>
          <el-dropdown trigger="click" placement="bottom-end">
            <div class="el-dropdown-link">
              <img class="avatar" src="../../assets/images/LoginLogo.png" alt="暂无图片">
              <span class="username">{{username}}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <span @click="accountInfo">账号资料</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="updatePassword">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="MessageNot">消息通知</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click="exit">
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 在这个位置增加面包屑 -->


      <!-- 主要内容区 -->
      <el-main class="elMain">
        <router-view />
      </el-main>
    </div>
  </div>
  <!-- 修改密码弹框 -->
  <el-dialog v-model="dialogVisible" title="修改密码" width="30%">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input v-model="ruleForm.checkPassword" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 账号资料弹框 -->
  <el-dialog v-model="accountDialogVisible" title="账号资料">
    <!-- 员工工号 员工姓名 员工年龄 性别 手机号码 电子邮箱 证件号码 职位 地址 所属科室 角色 密码 员工状态-->
    <el-form :model="ruleForm" ref="ruleFormRef" label-width="80px">
      <el-row>
        <!-- 员工工号 -->
        <el-col :span="6">
          <el-form-item label="员工工号" prop="workId">
            <el-input v-model="accountForm.workId"></el-input>
          </el-form-item>
        </el-col>
        <!-- 员工姓名 -->
        <el-col :span="6">
          <el-form-item label="员工姓名" prop="name">
            <el-input v-model="accountForm.name"></el-input>
          </el-form-item>
        </el-col>
        <!-- 员工年龄 -->
        <el-col :span="6">
          <el-form-item label="员工年龄" prop="age">
            <el-input v-model="accountForm.age" type="number"></el-input>
          </el-form-item>
        </el-col>
        <!-- 性别 -->
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="accountForm.sex" placeholder="请选择性别">
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
              <el-option label="保密" value="secret"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 手机号码 -->
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="accountForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <!-- 电子邮箱 -->
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="accountForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 证件号码 -->
        <el-col :span="12">
          <el-form-item label="证件号码" prop="idCard">
            <el-input v-model="accountForm.idCard"></el-input>
          </el-form-item>
        </el-col>
        <!-- 职位 -->
        <el-col :span="12">
          <el-form-item label="职位" prop="position">
            <el-input v-model="accountForm.position"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 地址 -->
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input v-model="accountForm.address"></el-input>
          </el-form-item>
        </el-col>
        <!-- 所属科室 -->
        <el-col :span="12">
          <el-form-item label="所属科室" prop="department">
            <el-select placeholder="请选择室">
              <el-option label="内科" value="department1"></el-option>
              <el-option label="外科" value="department2"></el-option>
              <el-option label="儿科" value="department3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 角色 -->
        <el-col :span="12">
          <el-form-item label="角色" prop="role">
            <el-select v-model="accountForm.roles" multiple placeholder="请选择角色">
              <el-option
                  v-for="role in rolesOptions"
                  :key="role.value"
                  :label="role.label"
                  :value="role.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 员工状态 -->
        <el-col :span="12">
          <el-form-item label="员工状态" prop="status">
            <el-select v-model="accountForm.status" placeholder="请选择员工状态">
              <el-option label="在职" value="active"></el-option>
              <el-option label="离职" value="inactive"></el-option>
              <!-- 可以根据需要添加更多状态 -->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 主题设置抽屉 -->
  <el-drawer
    v-model="drawerVisible"
    title="系统设置"
    direction="rtl"
    size="300px"
  >
    <div class="drawer-content">
      <!-- 这里可以放其他设置选项 -->
    </div>
  </el-drawer>
<!--  </el-watermark>-->
  <!-- 回到顶部组件 -->
  <el-backtop target=".el-main" :right="100" :bottom="100" :visibility-height="200">
      <el-icon>
        <ArrowUpBold style="width: 20px; height: 20px; color: inherit;"/>
      </el-icon>
  </el-backtop>
</template>

<script setup>
import {ref, computed, onMounted, watch} from 'vue'
import { useStore } from 'vuex'
/*引入需的icon图标*/
import { Operation, Expand,Fold, Setting, FullScreen, ArrowUpBold } from "@element-plus/icons-vue"
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";
// const font = ref({fontSize: '30'})
const store = useStore()
/*定义修改密码弹框的显隐*/
const dialogVisible = ref(false);
/*定义修改密码的表单*/
const ruleForm = ref({
  oldPassword: '',
  newPassword: '',
  checkPassword: ''
})
/*定义重置密码表单的校验*/
const rules = {
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger:'blur' }
  ]
}
/*定义提交方法*/
const submitForm = () => {
}
/*定义重置密码输入框内容方法*/
const resetForm = () => {
  ruleForm.value.oldPassword = ''
  ruleForm.value.newPassword = ''
  ruleForm.value.checkPassword = ''
}

/*计算当前页面的标题*/
const currentPageTitle = computed(() => {
  const currentPath = router.currentRoute.value.path;
  const matchedItem = menuItems.value.find(item => {
    if (item.children) {
      return item.children.some(child => child.index === currentPath);
    }
    return item.index === currentPath;
  });

  // 如果找到了匹配的菜单项，则返回其标题
  if (matchedItem) {
    if (matchedItem.children) {
      const childItem = matchedItem.children.find(child => child.index === currentPath);
      return childItem ? childItem.title : matchedItem.title;
    } else {
      return matchedItem.title;
    }
  }
  /*这是很不好的事情，实在是修复不了这个bug的问题，强行设置了*/
  if(currentPath === '/roleManage'){
    return '员工管理'
  }
  // 如果没有找到匹配的菜单项，则返回默认标题
  return '首页';
});


/*定义用户的昵称*/
const username = computed(() => store.state.user)

/*定义变量控制菜单栏的显示和隐藏*/
const isCollapse = ref(false)

/*定义点击账号资料的方法*/
const accountInfo = () => {
  accountDialogVisible.value = true
}

/*定义点击修改密码的方法*/
const updatePassword = () => {
  dialogVisible.value = true
}

/*定义点击消息通知的方法*/
const MessageNot = () => {
  ElMessage.success('开发中');
}


/*定义退出系统的方法 点击退出系统移除存储的值并且跳转页面*/
const exit = () => {
  /*弹一个有确认和取消的弹框*/
  ElMessageBox.confirm('您确定要退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清空缓存
    localStorage.clear()
    router.push('/login')
  }).catch(() => {
    /*点击取消，不执行任何操作*/
  })
}
const moduleRouteArr = ref(JSON.parse(localStorage.getItem('moduleRouteArr')))
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
const userMenus = moduleRouteArr._rawValue
console.log("userMenus",userMenus)

/*定义用户菜单数据*/
// const userMenus = {
//   'user1': [
//     { index: '/statisticalReport', title: '统计报表' },
//     { index: '/workbench', title: '工作台' },
//     { index: '/addRegistration', title: '挂号管理', children: [
//       { index: '/addRegistration', title: '新增挂号' },
//       { index: '/registrationList', title: '挂号记录' }
//     ]},
//     { index: '/chargeManage', title: '收费管理' },
//     { index: '/patientManage', title: '患者管理' },
//     { index: '/medicationInfo', title: '药品管理', children: [
//       { index: '/medicationInfo', title: '药品信息查询' },
//       { index: '/inboundManage', title: '入库管理' },
//       { index: '/outboundManage', title: '出库管理' },
//       { index: '/inventoryManage', title: '库存管理' },
//       { index: '/inventoryCounts', title: '库存盘点' }
//     ]},
//     { index: '/clinicInfo', title: '系统设置', children: [
//       { index: '/clinicInfo', title: '诊所信息维护' },
//       { index: '/dictionary', title: '字典表维护' },
//       { index: '/logs', title: '日志记录' }
//     ]}
//   ],
//   'user2': [
//     { index: '/statisticalReport', title: '统计报表' },
//     { index: '/workbench', title: '工作台' },
//     { index: '/chargeManage', title: '收费管理' },
//     { index: '/patientManage', title: '患者管理' },
//   ],
//   'admin': [
//     { index: '/statisticalReport', title: '统计报表' },
//     { index: '/workbench', title: '工作台' },
//     { index: '/addRegistration', title: '挂号管理', children: [
//       { index: '/addRegistration', title: '新增挂号' },
//       { index: '/registrationList', title: '挂号记录' }
//     ]},
//     { index: '/chargeManage', title: '收费管理' },
//     { index: '/patientManage', title: '患者管理' },
//     { index: '/medicationInfo', title: '药品管理', children: [
//       { index: '/medicationInfo', title: '药品信息查询' },
//       { index: '/inboundManage', title: '入库管理' },
//       { index: '/outboundManage', title: '出库管理' },
//       { index: '/inventoryManage', title: '库存管理' },
//       { index: '/inventoryCounts', title: '库存盘点' }
//     ]},
//     { index: '/employeeManage', title: '员工管理' },
//     { index: '/clinicInfo', title: '系统设置', children: [
//       { index: '/clinicInfo', title: '诊所信息维护' },
//       { index: '/dictionary', title: '字典表维护' },
//       { index: '/logs', title: '日志记录' }
//     ]}
//   ]
// }

/*获取当前登录用户 使用compute计算属性是因为这个是双向的*/
const currentUser = computed(() => store.state.user)
/*根据用户获取菜单项*/
const menuItems = computed(() => userMenus[currentUser.value] || [])

/*定义点击icon图标菜单栏展开收的方法*/
const changeCollapsed = () => {
  isCollapse.value = !isCollapse.value
}

/*在组件一挂载时就读取 localStorage 中的用户名并更新 Vuex store*/
onMounted(() => {
  const storedUsername = localStorage.getItem('username')
  if (storedUsername) {
    store.commit('setUser', storedUsername)
  }
})

/*监听路由变化 实时生效*/
watch(() => router.currentRoute.value, (to, from) => {
  const storedUsername = localStorage.getItem('username')
  if (storedUsername) {
    store.commit('setUser', storedUsername)
  }
})
/*账号资料弹框的显隐*/
const accountDialogVisible = ref(false)
/*定义弹出框的表单数据*/
const accountForm = ref({
  workId: '',
  username: '',
  password: '',
  email: '',
  phone: '',
  address: '',
  remark: '',
  status: 1,
  role: 'admin'
})
/* 定义可选的角色选项 */
const rolesOptions = ref([
  { value: 'admin', label: '管理员' },
  { value: 'editor', label: '编辑者' },
  { value: 'viewer', label: '查看者' },
]);
/* 添加抽屉相关的响应式变量 */
const drawerVisible = ref(false)
/* 定义控制全屏的变量 */
const fullscreenVisible = ref(false)
/* 定义点击全屏的方法 */
const fullscreen = () => {
  fullscreenVisible.value = !fullscreenVisible.value
  fullscreenVisible.value ? document.documentElement.requestFullscreen() : document.exitFullscreen()
}
</script>

<style scoped>
@import url("./HomeView.css");

</style>
